<template>
    <div>


        <div v-for="(item,index) in dataList" :key="index">
            <section class="main" v-if="index===0">
                <div class="imgbox"><img :src="item.picUrl" alt="" width="100%"/></div>
                <p class="title"> {{item.title}}</p>

            </section>
            <section class="mx" v-else>
                <a-row :gutter="8" class="mxList">
                    <a-col :span="18" class="title">
                        <p class="text-ellipsis2"> {{item.title}}</p>

                    </a-col>
                    <a-col :span="6">
                        <div class="mximgbox">
                            <img :src="item.picUrl" alt="" width="100%" v-if="item.picUrl"/>
                            <a-avatar shape="square" :size="48" icon="file-image" v-else/>
                        </div>
                    </a-col>


                </a-row>
            </section>
        </div>
    </div>
</template>

<script>
    export default {
        name: "preview",
        props: ['description'], //这个是一个字符串对象
        computed: {
            dataList() {
                //将字符串转换成JSON
                return JSON.parse(this.description);
            }
        }

    }
</script>

<style>

    .btnMargin {
        margin: 8px;
    }

    .main {
        clear: both;
        width: 100%;
        height: 150px;
        background-color: #FFFFFF;


    }

    .main .imgbox {
        width: 100%;
        height: 150px;
        overflow: hidden;
        text-align: center;
    }

    .main .title {
        font-size: 15px;
        height: 50px;
        background-color: rgba(0, 0, 0, 0.5);
        vertical-align: middle;
        color: #ffffff;
        line-height: 1.4em;
        padding: 6px;
        position: relative;
        margin-top: -50px;


    }


    .main .tool {

        width: 100%;
        height: 150px;
        background-color: rgba(210, 105, 30, 0.2);
        font-size: 16px;
        text-align: center;
        padding-top: 80px;
        box-sizing: border-box;
        margin-top: -215px;
        position: relative;
        z-index: 99999;

    }


    .mxList {
        height: 70px;
        padding: 4px;
        box-sizing: border-box;
        line-height: 1.8em;
        border-bottom: 1px solid #f1f1f1;


    }

    .mxList .title {
        height: 70px;
        line-height: 35px;
        vertical-align: middle;
        font-size: 15px;

        align-items: center;
        display: -webkit-flex;


    }

    .mximgbox {
        width: 64px;
        height: 64px;
        overflow: hidden;
    }

    .mxTool {
        position: relative;
        box-sizing: border-box;
        background-color: rgba(210, 105, 30, 0.2);
        width: 100%;
        height: 80px;
        margin-top: -80px;
        padding-top: 20px;
        text-align: center;
        z-index: 999;
    }

    .footer {
        clear: both;
        width: 100%;
        box-sizing: border-box;
        background-color: #f1f1f1;
        text-align: center;
        padding: 20px;
    }

</style>

